<!--晴天动画-->
<template>
    <div :style="`opacity: ${opacity};`">
        <div class="sunbox">
            <div class="ray" style="--angle: 0deg;"></div>
            <div class="ray" style="--angle: 10deg;"></div>
            <div class="ray" style="--angle: 20deg;"></div>
            <div class="ray" style="--angle: 30deg;"></div>
            <div class="ray" style="--angle: 40deg;"></div>
            <div class="ray" style="--angle: 50deg;"></div>
            <div class="ray" style="--angle: 60deg;"></div>
            <div class="ray" style="--angle: 70deg;"></div>
            <div class="ray" style="--angle: 80deg;"></div>
            <div class="ray" style="--angle: 90deg;"></div>
            <div class="ray" style="--angle: 100deg;"></div>
            <div class="ray" style="--angle: 110deg;"></div>
            <div class="ray" style="--angle: 120deg;"></div>
            <div class="ray" style="--angle: 130deg;"></div>
            <div class="ray" style="--angle: 140deg;"></div>
            <div class="ray" style="--angle: 150deg;"></div>
            <div class="ray" style="--angle: 160deg;"></div>
            <div class="ray" style="--angle: 170deg;"></div>
            <div class="ray" style="--angle: 180deg;"></div>
            <div class="ray" style="--angle: 190deg;"></div>
            <div class="ray" style="--angle: 200deg;"></div>
            <div class="ray" style="--angle: 210deg;"></div>
            <div class="ray" style="--angle: 220deg;"></div>
            <div class="ray" style="--angle: 230deg;"></div>
            <div class="ray" style="--angle: 240deg;"></div>
            <div class="ray" style="--angle: 250deg;"></div>
            <div class="ray" style="--angle: 260deg;"></div>
            <div class="ray" style="--angle: 270deg;"></div>
            <div class="ray" style="--angle: 280deg;"></div>
            <div class="ray" style="--angle: 290deg;"></div>
            <div class="ray" style="--angle: 300deg;"></div>
            <div class="ray" style="--angle: 310deg;"></div>
            <div class="ray" style="--angle: 320deg;"></div>
            <div class="ray" style="--angle: 330deg;"></div>
            <div class="ray" style="--angle: 340deg;"></div>
            <div class="ray" style="--angle: 350deg;"></div>
            <div class="center">
                <div class="cheek"></div>
                <div class="cheek"></div>
                <div class="eye"></div>
                <div class="eye"></div>
                <div class="mouth"></div>
            </div>
        </div>
        <div class="temp">
            <span style="font-size: 10vmin;">{{ weatherData.temp }}° / {{ weatherData.desc }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
import { useWindow } from '../hooks/useWindows'
import { getCurrentWindow } from '@tauri-apps/api/window';

const { convertToScreen, clearCachedWindowPosition } = useWindow();
let sunCenter: any;
let eyes: any;
let cheeks: any;
let mouth: any;

const props = defineProps<{
    opacity: number,
    weatherData: any,
    mouse: any
}>()

// 获取太阳中心的位置
function getSunCenter() {
    if (sunCenter) {
        const rect = sunCenter.getBoundingClientRect();
        return {
            x: rect.left + rect.width / 2,
            y: rect.top + rect.height / 2
        };
    }
    return {
        x: 0,
        y: 0
    }
}

// 计算角度
function calculateAngle(mouseX: number, mouseY: number, centerX: number, centerY: number) {
    const deltaX = mouseX - centerX;
    const deltaY = mouseY - centerY;
    return Math.atan2(deltaY, deltaX) * 180 / Math.PI;
}

// 更新面部特征位置
function updateFaceFeatures(mouseX: number, mouseY: number) {
    const center = getSunCenter();
    const angle = calculateAngle(mouseX, mouseY, center.x, center.y);

    // 计算移动距离（小范围移动）
    const maxMove = 2; // 最大移动距离（em单位）
    const distance = Math.min(maxMove, Math.abs(angle) / 10);

    // 根据角度计算移动方向
    const moveX = Math.cos(angle * Math.PI / 180) * distance;
    const moveY = Math.sin(angle * Math.PI / 180) * distance;

    // 更新眼睛位置
    eyes.forEach((eye: any) => {
        eye.style.transform = `translate(calc(-50% + ${moveX}em), calc(-50% + ${moveY}em))`;
    });

    // 更新脸颊位置
    cheeks.forEach((cheek: any) => {
        cheek.style.transform = `translate(calc(-50% + ${moveX * 0.5}em), calc(-50% + ${moveY * 0.5}em))`;
    });

    // 更新嘴巴位置
    mouth.style.transform = `translate(calc(-50% + ${moveX * 0.5}em), calc(-50% + ${moveY * 0.5}em)) rotate(-45deg)`;
}

const initRef = () => {
    sunCenter = document.querySelector('.center');
    eyes = document.querySelectorAll('.eye');
    cheeks = document.querySelectorAll('.cheek');
    mouth = document.querySelector('.mouth');
}

watch(props.mouse, async (value: any) => {
    const { winX, winY } = await convertToScreen("desktopWidget", value.x, value.y);
    //console.log(value)
    updateFaceFeatures(winX, winY);
})

const listenerWind = async () => {
    const currentWindow = await WebviewWindow.getCurrent();
    currentWindow.onMoved((event) => {
        clearCachedWindowPosition("desktopWidget")
    })
    document.addEventListener("mousedown", () => {
        getCurrentWindow().startDragging();
    })
}


onMounted(() => {
    initRef();
    listenerWind()
})
</script>

<style>
@property --modif {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@property --transY {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@keyframes growRays {

    0%,
    100% {
        --modif: 1;
    }

    50% {
        --modif: 1.6;
    }
}
</style>

<style lang="css" scoped>
.temp {
    font-size: 1vmin;
    position: absolute;
    top: calc(35% + 30em);
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #ffcc00;
    user-select: none;
    text-shadow: 0 0 3px #ffcc00;
}

.sunbox {
    font-size: 1vmin;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50em;
    aspect-ratio: 1;
    overflow: hidden;

    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25em;
        transform: translate(-50%, -50%);
        aspect-ratio: 1;
        background: #fc0;
        border-radius: 50% 48% 47% 52%;
        animation:
            rotate 5s infinite,
            shake 4.7s infinite;

        .cheek {
            --pos: 30%;
            width: 11%;
            aspect-ratio: 1.5;
            border-radius: 50%;
            background: #f003;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 67%;
            left: var(--pos);
            transition: transform 0.1s ease-out;

            &+& {
                left: calc(100% - var(--pos));
            }
        }

        .eye {
            --pos: 35%;
            width: 11%;
            aspect-ratio: 1;
            border-radius: 50%;
            background: #000;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: var(--pos);
            transition: transform 0.1s ease-out;
            overflow: hidden;

            &::before {
                content: "";
                position: absolute;
                top: 30%;
                left: 35%;
                width: 30%;
                aspect-ratio: 1;
                border-radius: 50%;
                transform: translate(-50%, -50%);
                background: #fff;
                animation: growShrink 3s linear infinite;
            }

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                left: 15%;
                width: 20%;
                aspect-ratio: 1;
                border-radius: 50%;
                transform: translate(-50%, -50%);
                background: #fff;
                animation: growShrink 3s -1.5s linear infinite;
            }

            &+& {
                left: calc(100% - var(--pos));
            }
        }

        .mouth {
            --size: 0.7em;
            width: 7%;
            aspect-ratio: 1;
            border: var(--size) solid #0000;
            border-left-color: #000;
            border-bottom-color: #000;
            border-radius: 50%;
            top: 63%;
            left: 50%;
            position: absolute;
            transform: translate(-50%, -50%) rotate(-45deg);
            transition: transform 0.1s ease-out;
        }
    }

    .ray {
        --angle: 0deg;
        --modif: 1;
        --transY: -13.5em;
        --anim: ;
        --extraanim: ;
        width: 3%;
        height: 10%;
        background: #fb2;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform-origin: 50% 100%;
        transform: translate(-50%, -100%) rotate(var(--angle)) translateY(var(--transY)) scaleY(var(--modif));
        position: absolute;
        animation:
            var(--extraanim) var(--anim);

        &:nth-child(odd) {
            --anim: growRays 2s infinite linear;
        }

        &:nth-child(even) {
            --anim: growRays 2s -1s infinite linear;
        }

        &:nth-child(3n) {
            animation-delay: -1.3s;
        }

        &:nth-child(7n) {
            animation-delay: -0.7s;
        }

        &:nth-child(4n) {
            --extraanim: moveRay 1.6s infinite linear, ;
        }

        &:nth-child(5n) {
            --extraanim: moveRay 2.3s -1.1s infinite linear, ;
        }
    }
}



@keyframes shake {

    0%,
    100% {
        border-radius: 50% 48% 47% 52%;
    }

    20% {
        border-radius: 53% 50% 49% 47%;
    }

    40% {
        border-radius: 51% 47% 52% 50%;
    }

    60% {
        border-radius: 48% 51% 50% 51%;
    }

    80% {
        border-radius: 47% 50% 51% 48%;
    }
}

@keyframes rotate {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    33% {
        transform: translate(-50%, -50%) rotate(2deg);
    }

    66% {
        transform: translate(-50%, -50%) rotate(-2deg);
    }
}

@keyframes growShrink {

    0%,
    100% {
        scale: 1.1 1.1;
    }

    50% {
        scale: 0.9 0.9;
    }
}

@keyframes moveRay {

    0%,
    100% {
        --transY: -13.5em;
    }

    33% {
        --transY: -13.25em;
    }

    66% {
        --transY: -13.75em;
    }
}


#youtube {
    z-index: 2;
    display: block;
    width: 100px;
    height: 70px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: red;
    border-radius: 50% / 11%;
    transition: transform 0.5s;
}

#youtube:hover,
#youtube:focus {
    transform: scale(1.1);
}

#youtube::before {
    content: "";
    display: block;
    position: absolute;
    top: 7.5%;
    left: -6%;
    width: 112%;
    height: 85%;
    background: red;
    border-radius: 9% / 50%;
}

#youtube::after {
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    left: 40px;
    width: 45px;
    height: 30px;
    border: 15px solid transparent;
    box-sizing: border-box;
    border-left: 30px solid white;
}

#youtube span {
    font-size: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
</style>
